<!--

  Vant的Tab标签页

  props: 
    v-model:(Number || String)               绑定当前选中标签的标识符
    type:(String)                            样式风格类型，可选值为 card
    color:(String)                           标签主题色
    background:(String)                      标签栏背景色
    duration:(Number || String)              动画时间，单位秒
    line-width:(Number || String)            底部条宽度，默认单位 px
    line-height:(Number || String)           底部条高度，默认单位 px
    animated:(Boolean)                       是否开启切换标签内容时的转场动画
    border:(Boolean)                         是否显示标签栏外边框，仅在 type="line" 时有效
    ellipsis:(Boolean)                       是否省略过长的标题文字
    sticky:(Boolean)                         是否使用粘性定位布局
    swipeable:(Boolean)                      是否开启手势滑动切换
    lazy-render:(Boolean)                    是否开启延迟渲染（首次切换到标签时才触发内容渲染）
    scrollspy:(Boolean)                      是否开启滚动导航
    offset-top:(Number || String)            v2.8.7	粘性定位布局下与顶部的最小距离，支持 px vw vh rem 单位，默认 px
    swipe-threshold:(Number || String)       滚动阈值，标签数量超过阈值且总宽度超过标签栏宽度时开始横向滚动
    title-active-color:(string)              标题选中态颜色
    title-inactive-color:(string)            标题默认态颜色
    before-change:(Function)                 v2.9.3 切换标签前的回调函数，返回 false 可阻止切换，支持返回 Promise

  slot: 
    nav-left	                               标题左侧内容
    nav-right	                               标题右侧内容

  events: 
                                                                                            回调参数
    click	                         点击标签时触发                                    name：标识符，title：标题
    change                         当前激活的标签改变时触发                           name：标识符，title：标题
    disabled                       点击被禁用的标签时触发	                            name：标识符，title：标题
    rendered                       标签内容首次渲染时触发（仅在开启延迟渲染后触发）     name：标识符，title：标题
    scroll                         滚动时触发，仅在 sticky 模式下生效                 { scrollTop: 距离顶部位置, isFixed: 是否吸顶 }

  demo: 
    <qm-tabs swipeable animated class="tabs">
      <qm-tab title="生活播报">
        ...
      </qm-tab>
      <qm-tab title="今日动态">内容 2</qm-tab>
      <qm-tab title="企业动态">内容 3</qm-tab>
    </qm-tabs>

  更多帮助请查看Vant官网： https://vant-contrib.gitee.io/vant/v2/#/zh-CN/tab#tabs-events

-->


<template>
  <van-tabs v-model="active" v-bind="$attrs" v-on="$listeners" class="qm-tabs" :class="{ 'title-center': titleCenter }"
    :style="`--width: calc(${width}px * var(--ratio))`">
    <template v-for="(index, name) in $slots" :slot="name">
      <slot :name="name" />
    </template>
  </van-tabs>
</template>

<script>
import { Tabs } from "vant";
export default {
  inheritAttrs: true,
  components: {
    [Tabs.name]: Tabs,
  },
  props: {
    value: String | Number,
    width: {
      type: Number,
      default: 153,
    },
    titleCenter: Boolean
  },
  data() {
    return {
      active: "",
    }
  },
  model: {
    prop: "value",
    event: "change",
  },
  methods: {
    change(event) {
      console.log(event);
      this.$emit("change", event)
    }
  },
  created() {
    this.active = this.value;
  },
  watch: {
    value(val) {
      this.active = val;
    }
  }
};
</script>

<style lang="less" scoped>
.qm-tabs.title-center {
  /deep/ .van-tabs__nav {
    justify-content: center;
    gap: 10px;
  }
}

// /deep/ .van-tabs__wrap {
//   margin: 0 calc(32px * var(--ratio));
// }
/deep/ .van-tab {
  flex: none;
  width: var(--width);
  color: var(--color-text-main);
  font-size: var(--font-size-subcontent);
}

/deep/ .van-tabs__line {
  background: var(--color-fill-primary);
}

/deep/ .van-tab--active {
  font-size: var(--font-size-subtitle);
  font-weight: 600;
  color: var(--color-text-title);
}
</style>
